<template>
	<w-layout showNavbar showTabbar navTitle="神话潮玩" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #navRight>
			<view @click="$u.route(`/pages/card_draw/rule?id=${state.goods_id}&type=${14}`)" class="">
				规则
			</view>
		</template>
		<template #default>
			<lff-barrage ref="DanmuDom" :height="'230'" :background="`#092936`"></lff-barrage>
			<view class="container">
				<up-gap height="200"></up-gap>
				<view class="fc-ac" style="position: relative;">
					<image style="width: 532rpx;height: 412rpx;position: absolute;left: 50%;top: 82%;transform: translateX(-50%);" src="/static/icon/public/base-2.png" mode=""></image>
					<image style="width: 400rpx;height: 400rpx;position: relative;" src="/static/icon/public/box-big.png" mode="widthFix"></image>
				</view>
				<up-gap height="200"></up-gap>
				
				<view class="w-100" style="position: fixed;left: 0;" :style="{'bottom': appStore.tabbarHeight+60+'px'}">
					<view class="px-40 w-100 h-100 fr-ac-jsb">
						<view @click="openPaymentPopup(state.goods_info.card_set.left_num,'left_count')" class="public-btn-8 fr-jc color" style="width: 144rpx;height: 76rpx;line-height: 60rpx;">
							<view class="text-color-b">
								{{state.goods_info.card_set.left_title}}
							</view>
						</view>
						<view @click="openPaymentPopup(state.goods_info.card_set.center_num,'center_count')" class="public-btn-8 fr-jc color" style="width: 144rpx;height: 76rpx;line-height: 60rpx;">
							<view class="text-color-b">
								{{state.goods_info.card_set.center_title}}
							</view>
						</view>
						<view @click="openPaymentPopup(state.goods_info.card_set.right_num,'right_count')" class="public-btn-8 fr-jc color" style="width: 144rpx;height: 76rpx;line-height: 60rpx;">
							<view class="text-color-b">
								{{state.goods_info.card_set.right_title}}
							</view>
						</view>
						<view v-if="state.goods_info.card_set.right_num1" @click="openPaymentPopup(state.goods_info.card_set.right_num1,'right_count1')" class="public-btn-8 fr-jc color" style="width: 144rpx;height: 76rpx;line-height: 60rpx;">
							<view class="text-color-b">
								{{state.goods_info.card_set.right_title1}}
							</view>
						</view>
					</view>
				</view>
				
				<popup-good-card></popup-good-card>
				
				<view class="public-btn-12 pl-40 pr-20 py-50" style="position: fixed;right: 2rpx;top: 45%;">
					<view @click="$u.route(`/pages/card_draw/history?id=${state.goods_id}`)" class="fc-ac">
						<image class="" style="height: 32rpx;width: 32rpx;" src="/static/icon/public/jilu-fill.png" mode="widthFix"></image>
						<view class="fs-24 color mt-10 mb-40">
							记录
						</view>
					</view>
					<view @click="$u.route(`/pages/card_draw/book?id=${state.goods_id}`)" class="fc-ac">
						<image class="" style="height: 32rpx;width: 32rpx;" src="/static/icon/public/tujian-fill.png" mode="widthFix"></image>
						<view class="fs-24 color mt-10">
							图鉴
						</view>
					</view>
				</view>
				
				
				<up-popup :show="popup.showObtain" @close="popup.showObtain = false" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="public-popup-4 px-50 py-20 fc" style="width: 670rpx;min-height: 900rpx;position: relative;">
						<view class="fs-36">
							恭喜获得
						</view>
						<view class="mt-80 fc-ac">
							<view class="public-cover-2 t-c fs-36" style="width: 360rpx;height: 70rpx;">
							</view>
							
							<view v-if="false" class="">
								<view class="mt-100" style="position: relative;">
									<cut-corner :arrow="2" clipSize="26rpx">
										<image style="width: 250rpx;height: 250rpx;background-color: #000;" src="/static/logo.png" mode=""></image>
									</cut-corner>
									<view class="" style="position: absolute;top: 0;left: 0;z-index: 88;">
										<cut-corner :arrow="3" clipSize="8rpx">
										<view class="px-8 py-2 fs-24" style="background-color: var(--color);color: #002C33;">
											最终赏
										</view>
										</cut-corner>
									</view>
									<view class="px-10 fs-24" style="position: absolute;bottom: 0;right: 0;z-index: 88;background: rgba(0,0,0,0.5);">
										x1
									</view>
								</view>
								<view class="mt-40 t-c">
									赏品详细名称
								</view>
								<view class="fs-24 mt-15 op-50 t-c">
									可兑换 ¥20.00
								</view>
							</view>
							<view v-if="true" class="my-40 gap-40" style="display: grid;grid-template-columns: repeat(3,1fr);">
								<view class="" v-for="(item,index) in 6" :key="index">
									<view class="" style="position: relative;">
										<cut-corner :arrow="2" clipSize="26rpx">
											<image style="width: 170rpx;height: 170rpx;background-color: #000;" src="/static/logo.png" mode=""></image>
										</cut-corner>
										<view class="" style="position: absolute;top: 0;left: 0;z-index: 88;">
											<cut-corner :arrow="3" clipSize="8rpx">
											<view class="px-8 py-2 fs-24" style="background-color: var(--color);color: #002C33;">
												最终赏
											</view>
											</cut-corner>
										</view>
										<view class="px-10 fs-24" style="position: absolute;bottom: 0;right: 0;z-index: 88;background: rgba(0,0,0,0.5);">
											x1
										</view>
									</view>
									<view class="mt-40 t-c">
										赏品详细名称
									</view>
									<view class="fs-24 mt-15 op-50 t-c">
										可兑换 ¥20.00
									</view>
								</view>
							</view>
						</view>
						<view class="fr-ac-jsb gap-30 mt-auto">
							<view @click="popup.showObtain = false;" class="public-btn-9 flex-1 transition py-25 t-c mb-60">
								<view class="text-color-b fs-32">
									重抽
								</view>
							</view>
							<view @click="popup.showObtain = false;" class="public-btn-9 flex-1 transition py-25 t-c mb-60">
								<view class="text-color-b fs-32">
									去盒柜
								</view>
							</view>
							<view @click="popup.showObtain = false;" class="public-btn-9 flex-1 transition py-25 t-c mb-60">
								<view class="text-color-b fs-32">
									确定
								</view>
							</view>
						</view>
						
					</view>
				</up-popup>
				
				
				<!-- 抽奖奖品弹窗 -->
				<up-popup :show="GoodsPopup.show" @close="GoodsPopup.show=false" mode="center" :safeAreaInsetBottom="false" bgColor="transparent">
					<view class="public-popup-2 px-50 py-20 fc" style="width: 670rpx;position: relative;">
						<view class="fs-36">
							恭喜获得
						</view>
						<scroll-view scroll-x="true" class="mt-100">
							<view :class="GoodsPopup.list.length == 1?'fr-ac-jc':'fr-ac'">
								<view class="fc-ac mr-30" v-for="(item,index) in GoodsPopup.list" :key="index">
									<view class="color fs-24 t-c mb-20">
										{{item.shang_title}}
									</view>
									<cut-corner :arrow="2" clipSize="25rpx">
										<image style="width: 170rpx;height: 170rpx;" :src="item.goodslist_imgurl" mode="widthFix"></image>
									</cut-corner>
									<view class="fs-24 ellipsis-1 mt-15 op-90">
										{{item.goodslist_title}}
									</view>
									<!-- <view class="fs-20 mt-10 ellipsis-1 op-50">
										价值：￥{{item.goodslist_money}} 
									</view> -->
								</view>
							</view>
						</scroll-view>
						<view @click="closeGoodsPopup" class="public-btn-3 transition py-25 t-c mt-auto mb-60">
							<view class="text-color-b fs-32">
								确定
							</view>
						</view>
					</view>
				</up-popup>
				
				<!-- 抽奖视频 -->
				<view v-if="PrizePopup.show"
					style="position: fixed;top: 0;left: 0;z-index: 999999;background: rgba(0, 0, 0, 0.5);display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;">
					<view style="width: 100%;height: 100%;"
						class="animate__animated animate__fadeIn">
						<video autoplay :controls="false" @ended="PrizePopup.show = false;GoodsPopup.show = true"
							style="width: 100%;height: 100%;" :src="PrizePopup.video_url"></video>
					</view>
				</view>
				
				<payment
					:show="PaymentPopup.show" 
					type="chouka"
					:goods_id="PaymentPopup.goods_id"
					:goods_num="PaymentPopup.goods_num"
					:goods_num_type="PaymentPopup.goods_num_type"
					@callback="callback"
					@close="closePaymentPopup"
				></payment>
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll, onUnload
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		cardextractor_goodsdetail,
		cardextractor_prizeorderlog
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		get_cardextractor_goodsdetail()
	})
	onUnload(()=>{
		clearInterval(timer.value)
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	const DanmuDom = ref(null)
	const timer = ref(null)
	function danmu(){
		let a = 0;
		timer.value = setInterval(function() {
			DanmuDom.value.add({
				markTitle: state.new_bulletcha[a].content,
				head_pic: state.new_bulletcha[a].headimg
			});
			if (a < state.new_bulletcha.length - 1) {
				a++;
			} else {
				a = 0
			}
		}, 2000)
	}
	
	const page = reactive({
		scrollTop:0
	})
	
	const tabs = reactive({
		current:0,
		list:[
			{
				id:'',
				name:'赏品预览',
			},
			{
				id:'',
				name:'中赏详情',
			}
		]
	})
	function tabChange(e){
		tabs.current = e.index
		console.log(tabs.current)
	}
	
	
	const level_tabs = reactive({
		current:0,
		list:[
			{
				id:'',
				name:'全部',
			},
			{
				id:'',
				name:'神话',
			},
			{
				id:'',
				name:'传说',
			},
			{
				id:'',
				name:'稀有',
			}
		]
	})
	function levelTabChange(e){
		level_tabs.current = e.index
		console.log(level_tabs.current)
	}
	
	const state = reactive({
		goods_id: '',
		goods_info: {
			card_set: {}
		},
		new_bulletcha: [],
		bulletchat: [],
		
		list:[1,1],
		page:1,
		limit:15,
		last_limit:15,
		
		keyword:'',
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 15
	}
	
	
	const popup = reactive({
		showObtain:false,
		showMaster:true,
	})
	
	function replaceBox(){
		uni.navigateTo({
			url:`/pages/yifan_shang/replace`
		})
	}
	
	
	const swiper = reactive({
		current:0,
		list:[
			{
				id:1,
				url:'/static/logo.png'
			},
			{
				id:2,
				url:'/static/logo.png'
			},
			{
				id:3,
				url:'/static/logo.png'
			}
		]
	})
	function swiperChange(e){
		console.log(e,'eeeeeeeee')
		swiper.current = e.detail.current
	}
	
	
	async function get_cardextractor_goodsdetail(){
		const res = await cardextractor_goodsdetail({
			goods_id: 0,
			type: 1
		})
		state.goods_id = res.goods_id
		state.goods_info = res.goods
		state.new_bulletcha = res.new_bulletcha
		state.bulletchat = res.guize.content1
		danmu()
	}
	
	
	// 支付
	const PaymentPopup = reactive({
		show: false,
		goods_id: '',
		goods_num: '',
		goods_num_type: '',
	})
	async function openPaymentPopup(num,num_type){
		PaymentPopup.goods_id = state.goods_id
		PaymentPopup.goods_num = num
		PaymentPopup.goods_num_type = num_type
		PaymentPopup.show = true
	}
	function closePaymentPopup(num){
		PaymentPopup.show = false
	}
	// 支付回调
	async function callback(order_num){
		console.log(order_num,'order_num')
		closePaymentPopup()
		get_cardextractor_prizeorderlog(order_num)
	}
	async function get_cardextractor_prizeorderlog(order_num){
		const res = await cardextractor_prizeorderlog({
			order_num
		})
		GoodsPopup.list = res.data
		PrizePopup.show = true
	}
	
	
	const GoodsPopup = reactive({
		show: false,
		list: []
	})
	function closeGoodsPopup(){
		GoodsPopup.show = false
	}
	
	// 抽奖视频
	const PrizePopup = reactive({
		show: false,
		video_url: '/static/video/play.mp4',
	})
	
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 30rpx;
		
	}
	
	.swiper-item{
		width: fit-content;
		height: fit-content;
	}
	.swiper-item-active{
		image{
			width: 250rpx;height: 250rpx;
		}
	}
	.swiper-item-default{
		opacity: 0.7;
		image{
			width: 210rpx;height: 210rpx;
		}
	}
	
	.gong-gao{
		background: url('/static/icon/public/gong-gao.png') no-repeat;
		background-size: 100% 100%;
		height: 64rpx;
	}
</style>